<template>
  <PageWrapper
    class="high-form"
    title="高级表单"
    content=" 高级表单常见于一次性输入和提交大批量数据的场景。"
  >
    <a-card title="仓库管理" :bordered="false">
      <BasicForm @register="register" />
    </a-card>
    <a-card title="任务管理" :bordered="false" class="!mt-5">
      <BasicForm @register="registerTask" />
    </a-card>
    <a-card title="成员管理" :bordered="false">
      <PersonTable ref="tableRef" />
    </a-card>

    <template #rightFooter>
      <a-button type="primary" @click="submitAll"> 提交 </a-button>
    </template>
  </PageWrapper>
</template>
<script lang="ts">
import { BasicForm, useForm } from '@/components/form'
import { defineComponent, ref } from 'vue'
import PersonTable from './PersonTable.vue'
import { PageWrapper } from '@/components/page'
import { schemas, taskSchemas } from './data'
import { Card } from 'ant-design-vue'

export default defineComponent({
  name: 'FormHightPage',
  components: { BasicForm, PersonTable, PageWrapper, [Card.name]: Card },
  setup() {
    const tableRef = ref<{ getDataSource: () => any } | null>(null)

    const [register, { validate }] = useForm({
      baseColProps: {
        span: 6,
      },
      schemas: schemas,
      showActionButtonGroup: false,
    })

    const [registerTask, { validate: validateTaskForm }] = useForm({
      baseColProps: {
        span: 6,
      },
      schemas: taskSchemas,
      showActionButtonGroup: false,
    })

    async function submitAll() {
      try {
        if (tableRef.value) {
          console.log('table data:', tableRef.value.getDataSource())
        }

        const [values, taskValues] = await Promise.all([
          validate(),
          validateTaskForm(),
        ])
        console.log('form data:', values, taskValues)
      } catch (error) {}
    }

    return { register, registerTask, submitAll, tableRef }
  },
})
</script>
<style lang="less" scoped>
.high-form {
  padding-bottom: 48px;
}
</style>
